<template>
  <div class="toplist-container">
    <div class="top-list-main con">
      <div class="top-list-l">
        <p class="tese-list">云音乐特色榜</p>
        <ul class="cloudmusic-top">
          <li
            v-for="item in toplist.list"
            :key="item.id"
            @click="showDetail(item.id)"
          >
            <dl>
              <dt><img :src="item.coverImgUrl" alt="" /></dt>
              <dd>
                <p>{{ item.name }}</p>
                <p class="ganggang-update">{{ item.updateFrequency }}</p>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
      <div class="top-list-r">
        <Top :key="addkey"></Top>
      </div>
    </div>
  </div>
</template>

<script>
import { topListDetailApi } from "@/requset/api";
import Top from "@/components/List/Top.vue";
export default {
  name: "toplist",
  data() {
    return {
      toplist: {},
      addkey: 0,
    };
  },
  methods: {
    // 跳转路由，改变 key 值 局部更新TopListDetail组件
    showDetail(id) {
      this.$router.push(`/toplist?id=${id}`);
      this.addkey++;
    },
  },
  components: {
    Top,
  },
  created() {
    // 请求排行版
    topListDetailApi().then(({ data: res }) => {
      this.toplist = res;
    });
  },
};
</script>

<style lang="less" scoped>
@import "../assets/base.less";
.toplist-container {
  min-height: 500px;
  .top-list-main {
    display: flex;
    .top-list-l {
      padding-top: 40px;
      width: 25%;
      height: 100%;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      .tese-list {
        font-size: 15px;
        font-weight: 600;
        padding-left: 15px;
      }
      .cloudmusic-top {
        margin-top: 15px;
        li {
          padding: 13px 20px;
          box-sizing: border-box;
          cursor: pointer;
          &:hover {
            background-color: #f4f2f2;
          }
          dl {
            display: flex;
            img {
              width: 40px;
            }
            dd {
              margin-left: 10px;
              p {
                line-height: 20px;
                font-size: 12px;
              }
              .ganggang-update {
                color: #999999;
              }
            }
          }
        }
      }
    }
    .top-list-r {
      width: 75%;
      height: 100%;
      border-right: 1px solid #ccc;
    }
  }
}
</style>